<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>运单</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />

    <style>
      .custom-input-number .el-input__inner {
        text-align: left;
      }
      .el-select-dinwei .el-select-dropdown {
        left: -40% !important;
      }
      .search-bar {
        display: flex;
        padding: 10px;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 999;
      }
      .action-container {
        padding: 10px;
        position: sticky;
        bottom: 0px;
        background: #fff;
        z-index: 999;
      }
      .u-flex {
        display: flex;
      }
      .u-row-around {
        justify-content: space-around;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="u-p-t-15">
        <div class="search-bar d-flex u-m-b-10 u-col-center isHeader">
          <span
            class="u-m-l-20"
            style="align-items: center; display: flex; margin-right: auto"
          >
            <template v-if="mode === 'add'">
              <el-tag class="u-m-t-2" size="mini" type="success"
                >运单-新增</el-tag
              >
            </template>
            <template v-if="mode === 'edit'">
              <el-tag class="u-m-t-2" size="mini">运单-编辑</el-tag>
            </template>
            <template v-if="mode === 'details'">
              <el-tag class="u-m-t-2" size="mini" type="info">运单-详情</el-tag>
            </template>
          </span>
        </div>
        <div ref="formHeight" class="print-container">
          <el-form
            size="small"
            label-width="8em"
            label-position="right"
            style="padding: 5px 25px 0 5px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="计划日期" required>
                  <el-date-picker
                    v-model="formData.SDTRDT"
                    :disabled="isFormDataDisabled"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="计划日期"
                    :style="{ width: '100%' }"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属组织" required>
                  <el-select
                    v-model="formData.Company_Code"
                    placeholder="所属组织"
                    :style="{ width: '100%' }"
                    filterable
                    :disabled="isFormDataDisabled"
                  >
                    <el-option
                      v-for="item in formOptions.CompanyCodeOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="车队" required>
                  <el-select
                    v-model="formData.SouAddCode"
                    placeholder="车队"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.shenqingrenOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="车牌号码" required>
                  <el-select
                    v-model="formData.SDPA8"
                    placeholder="车牌号码"
                    :style="{ width: '100%' }"
                    :disabled="isFormDataDisabled"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.xiehuojianchengOptiopns"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="挂车号码">
                  <el-select
                    v-model="formData.SDLITM"
                    placeholder="挂车号码"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="item in formOptions.jiayoukaOptions"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="主驾驶">
                  <el-select
                    v-model="formData.BusinessType"
                    placeholder="主驾驶"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in formOptions.yewuleixingOptions"
                      :key="index"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="副驾驶">
                  <el-select
                    v-model="formData.fujiashi"
                    placeholder="副驾驶"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in formOptions.fujiashiOptions"
                      :key="index"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="押运员">
                  <el-select
                    v-model="formData.yayunyuan"
                    placeholder="押运员"
                    :disabled="isFormDataDisabled"
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in formOptions.yanyunyuanOptions"
                      :key="index"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="出车备注">
                  <el-input
                    v-model="formData.SDSPECRDT"
                    :disabled="isFormDataDisabled"
                    placeholder="卸货备注"
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="外发单价">
                  <div style="display: flex">
                    <el-input-number
                      v-model="formData.SDUORG"
                      :disabled="isFormDataDisabled"
                      controls-position="right"
                      :style="{ width: '50%' }"
                      :controls="false"
                      class="inputNumAlign_left"
                    >
                    </el-input-number>
                    <el-select
                      v-model="formData.SDUOM"
                      :disabled="isFormDataDisabled"
                      :style="{ width: '50%' }"
                      filterable
                    >
                      <el-option
                        v-for="item in formOptions.danweiOptions"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider>运单明细</el-divider>
          <div class="u-flex u-row-around">
            <div style="color: rgba(25, 128, 19, 1)" @click="sortTable">
              <i class="el-icon-sort"></i>排序
            </div>
            <div style="color: rgba(42, 130, 228, 1)">
              <i class="el-icon-plus"></i>添加订单
            </div>
            <div style="color: rgba(42, 130, 228, 1)" @click="addPath">
              <i class="el-icon-guide"></i>添加路径
            </div>
            <div style="color: rgba(255, 87, 51, 1)">
              <i class="el-icon-delete"></i>删除路径
            </div>
          </div>
          <div>
            <y-table
              :defaultColumnConfig="defaultColumnConfig"
              :data="tableData"
              :columns="tableColumns"
              :border="true"
              :height="300"
              :header-cell-style="{
          background: 'rgba(233, 239, 247, 1)',
          color: 'rgba(56, 56, 56, 1)',
        }"
            ></y-table>
          </div>
        </div>

        <div class="action-container u-flex u-row-around">
          <el-button type="info" plain size="mini" @click="close"
            >关闭</el-button
          >
          <template
            v-if="
                mode !== 'dateils'
            "
          >
            <el-button
              type="primary"
              :loading="isLoadingBtn"
              size="mini"
              @click="submit"
              >提交</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/element-ui/lib/index.js"></script>
    <script src="../Ytable.js"></script>
    <script>
      /**
       * 转换URL参数
       */
      function queryToObject() {
        const res = {};
        const search = location.search.substr(1); // 返回类似于 a=10&b=20&c=30
        const paramArr = search.split("&");
        paramArr.forEach(function (item) {
          const itemArr = item.split("=");
          const key = itemArr[0];
          const value = itemArr[1];
          res[key] = value;
        });
        return res;
      }
      Vue.use(ELEMENT);
      let nuteidm = (i, id, name) => {
        return {
          ID: i[id],
          Name: i[name],
          ...i,
        };
      };
      let objectiveAndContents = () => {
        return {
          id: "",
          xuhao: undefined,
          Dizhileixing: undefined,
          Dizhijiancheng: undefined,
          Shuliang: undefined,
          chanpingmc: undefined,
          yaoqiushijian: undefined,
        };
      };

      new Vue({
        el: "#app",
        data() {
          return {
            defaultColumnConfig: {
              align: "center",
              showOverflowTooltip: true,
            },
            tableData: [
              {
                id: 1,
                xuhao: 1,
                Dizhileixing: "停车场",
                Dizhijiancheng: "地址1",
                Shuliang: 100,
                chanpingmc: "商品1",
                yaoqiushijian: "",
              },
            ],
            tableColumns: [],
            TableAllOptions: {
              dizhiOptions: [
                {
                  ID: "1",
                  Name: "地址1",
                },
                {
                  ID: "2",
                  Name: "地址2",
                },
              ],
              chanpinOptions: [
                {
                  ID: "1",
                  Name: "商品1",
                },
                {
                  ID: "2",
                  Name: "商品2",
                },
              ],
            },
            mode: "",
            queryOptionMap: {
              kehujianchengOptiopnMap: {},
              templateNamedaoruOptiopnsMap: {},
            },
            formData: {
              Company_Code: undefined,
              SDAN8T: undefined,
              SouAddCode: undefined,
              SouAddName: undefined,
              SDPA8: undefined,
              SDPA8T: undefined,
              SDLITM: undefined,
              SDUORG: undefined,
              SDUOM: undefined,
              SDSPECRDT: undefined,
              BusinessType: undefined,
              fujiashi: undefined,
              yayunyuan: undefined,
              SDTRDT: undefined,
            },

            formOptions: {
              CompanyCodeOptions: [],
              danweiOptions: [],
              shenqingrenOptions: [],
              xiehuojianchengOptiopns: [],
              chufadiOptions: [],
              lichenleifOptions: [],
              jifeifjOptions: [],
              jiayoukaOptions: [],
              yewuleixingOptions: [],
              fujiashiOptions: [],
              yanyunyuanOptions: [],
            },
            yuanOptions: {
              CompanyCodeOptions: [],
              shenqingrenOptions: [],
              xiehuojianchengOptiopns: [],
              chufadiOptions: [],
              lichenleifOptions: [],
              jifeifjOptions: [],
              jiayoukaOptions: [],
              yewuleixingOptions: [],
              fujiashiOptions: [],
              yanyunyuanOptions: [],
            },
            TYJSFS: {
              jffs: [
                {
                  ID: "1",
                  Name: "吨",
                },
                {
                  ID: "2",
                  Name: "趟",
                },
                {
                  ID: "3",
                  Name: "公里",
                },
                {
                  ID: "4",
                  Name: "吨/公里",
                },
                {
                  ID: "5",
                  Name: "吨/(装-卸)",
                },
                {
                  ID: "6",
                  Name: "吨/公里(装-卸)",
                },
              ],
              lclx: [
                {
                  ID: "1",
                  Name: "实际里程",
                },
                {
                  ID: "2",
                  Name: "标准里程",
                },
                {
                  ID: "3",
                  Name: "标准重程",
                },
                {
                  ID: "4",
                  Name: "结算里程",
                },
                {
                  ID: "5",
                  Name: "GPS重程",
                },
              ],
              jfzl: [
                {
                  ID: "1",
                  Name: "卸货量",
                },
                {
                  ID: "2",
                  Name: "装货量",
                },
                {
                  ID: "3",
                  Name: "装卸取大",
                },
                {
                  ID: "4",
                  Name: "装卸取小",
                },
                {
                  ID: "5",
                  Name: "净重",
                },
                {
                  ID: "6",
                  Name: "毛重",
                },
                {
                  ID: "7",
                  Name: "订单数量",
                },
              ],
            },
            // 通用计费方式下拉隐射
            TYJSFSMap: {
              jffs: {
                1: "吨",
                2: "趟",
                3: "公里",
                4: "吨/公里",
                5: "吨/(装-卸)",
                6: "吨/公里(装-卸)",
              },
              lclx: {
                1: "实际里程",
                2: "标准里程",
                3: "标准重程",
                4: "结算里程",
                5: "GPS重程",
              },
              jfzl: {
                1: "卸货量",
                2: "装货量",
                3: "装卸取大",
                4: "装卸取小",
                5: "净重",
                6: "毛重",
                7: "订单数量",
              },
            },
            // 是否禁用表单输入
            isFormDataDisabled: false,
            // 提交loading
            isLoadingBtn: false,
          };
        },
        components: {
          // 局部注册组件
          yTable: window.EnhancedTable,
        },
        computed: {
          isdevUrl() {
            let url = location.href;
            return url.indexOf("http://127.0.0.1:5500") !== -1;
          },
        },
        methods: {
          handleKehujianchengClick(field, optld, item) {
            console.log("optio", field, JSON.stringify(item));
            this.formData[field] = item[optld] || undefined;
          },
          close() {
            if (this.isdevUrl) {
              location.href = `http://127.0.0.1:5500/yunfeidingdan/yundanTable.html`;
            } else {
              // 处理其他环境或默认行为
            }
          },

          // 排序
          sortTable() {
            this.tableData.sort((a, b) => a.xuhao - b.xuhao);
          },
          // 新增行
          addPath() {
            let data = objectiveAndContents();
            this.tableData.push(data);
          },
          async submit() {
            let f = this.formData;
            const res = await axios.post("/WeiXinOrder/Add", f, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            });
            if (res.data.state === 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              // this.close();
            } else {
              this.$message({
                message: res.data.Message,
                type: "error",
              });
            }
          },

          async getCustomerC() {
            //装货地
            const res2 = await axios.post("/CombBox/GetSource", {}, {});
            if (res2.status === 200) {
              this.yuanOptions.shenqingrenOptions = res2.data;
              this.formOptions.shenqingrenOptions = res2.data.map((item) =>
                nuteidm(item, "Id", "SearchCode")
              );
            }

            //产品代码
            const res5 = await axios.post("/CombBox/GetSDLITM?id=1", {}, {});
            if (res5.status === 200) {
              this.yuanOptions.jiayoukaOptions = res5.data;
              this.formOptions.jiayoukaOptions = res5.data.map((item) =>
                nuteidm(item, "SDLITM", "SDLITM")
              );
            }
            //单位
            const res6 = await axios.post(
              "/PublicAttribute/GetPublicAttributesTrue?typeId=15&IsTrue=1",
              {},
              {}
            );
            if (res6.status === 200) {
              this.yuanOptions.danweiOptions = res6.data;
              this.formOptions.danweiOptions = res6.data.map((item) =>
                nuteidm(item, "Name", "Name")
              );
            }
            //业务类型
            const res7 = await axios.post("/CombBox/GetBusinessType", {}, {});
            if (res7.status === 200) {
              this.yuanOptions.yewuleixingOptions = res7.data;
              this.formOptions.yewuleixingOptions = res7.data.map((item) =>
                nuteidm(item, "Id", "Name")
              );
            }
          },
          // 初始化表格列
          initTableColumns() {
            this.tableColumns = [
              {
                prop: "xuhao",
                label: "序号",
                width: 80,
                fixed: "left",
                render: function (h, scope) {
                  return h("el-input-number", {
                    props: {
                      value: scope.row.xuhao,
                      size: "mini",
                      controls: false,
                      disabled: false,
                    },
                    attrs: {
                      class: "custom-input-number",
                    },
                    on: {
                      input: function (val) {
                        scope.row.xuhao = val;
                      },
                    },
                  });
                },
              },
              {
                prop: "Dizhileixing",
                label: "地址类型",
                width: 120,
                render: function (h, scope) {
                  return h("el-input", {
                    props: {
                      value: scope.row.Dizhileixing,
                      size: "mini",
                    },
                    on: {
                      input: function (val) {
                        scope.row.Dizhileixing = val;
                      },
                    },
                  });
                },
              },
              {
                prop: "Dizhijiancheng",
                label: "地址简称",
                width: 180,
                render: (h, scope) => {
                  return h(
                    "el-select",
                    {
                      props: {
                        value: scope.row.Dizhijiancheng,
                        placeholder: "请选择",
                        filterable: true,
                        size: "mini",
                      },
                      on: {
                        input: (val) => {
                          scope.row.Dizhijiancheng = val;
                        },
                      },
                    },
                    this.TableAllOptions.dizhiOptions.map((option) =>
                      h("el-option", {
                        props: {
                          label: option.Name,
                          value: option.ID,
                        },
                      })
                    )
                  );
                },
              },
              {
                prop: "Shuliang",
                label: "数量",
                width: 100,
                render: function (h, scope) {
                  return h("el-input-number", {
                    props: {
                      value: scope.row.Shuliang,
                      size: "mini",
                      controls: false,
                    },
                    style: {
                      width: "100%",
                    },
                    on: {
                      input: function (val) {
                        scope.row.Shuliang = val;
                      },
                    },
                  });
                },
              },
              {
                prop: "chanpingmc",
                label: "产品名称",
                width: 120,
                render: (h, scope) => {
                  return h(
                    "el-select",
                    {
                      props: {
                        value: scope.row.chanpingmc,
                        placeholder: "请选择",
                        filterable: true,
                        size: "mini",
                      },
                      on: {
                        input: (val) => {
                          scope.row.chanpingmc = val;
                        },
                      },
                    },
                    this.TableAllOptions.chanpinOptions.map((option) =>
                      h("el-option", {
                        props: {
                          label: option.Name,
                          value: option.ID,
                        },
                      })
                    )
                  );
                },
              },
              {
                prop: "yaoqiushijian",
                label: "要求时间",
                width: 180,
                render: function (h, scope) {
                  return h("el-date-picker", {
                    props: {
                      value: scope.row.yaoqiushijian,
                      type: "datetime",
                      format: "yyyy-MM-dd HH:mm",
                      valueFormat: "yyyy-MM-dd HH:mm",
                      placeholder: "选择日期时间",
                      size: "mini",
                    },
                    style: {
                      width: "100%",
                    },
                    on: {
                      input: function (val) {
                        scope.row.yaoqiushijian = val;
                        console.log("选择的时间:", val);
                      },
                    },
                  });
                },
              },
            ];
          },
        },

        async created() {
          this.getCustomerC(); //获取下拉
          let query = queryToObject();
          this.mode = query.mode;

          // 请求下拉赋值然后-初始化表格列
          this.initTableColumns();
        },
      });
    </script>
  </body>
</html>
